---
layout: example
category: example
title: Filter markers by text input
description: Filter markers by icon name by typing in a text input.
---
<style>
    .filter-ctrl {
        position: absolute;
        top: 10px;
        right: 10px;
        z-index: 1;
        width: 180px;
    }

    .filter-ctrl input[type=text] {
        font: 12px/20px 'Helvetica Neue', Arial, Helvetica, sans-serif;
        width: 100%;
        border: 0;
        background-color: #fff;
        height: 40px;
        margin: 0;
        color: rgba(0,0,0,.5);
        padding: 10px;
        box-shadow: 0 0 0 2px rgba(0,0,0,0.1);
        border-radius: 3px;
    }
</style>
<div id='map'></div>
<div class='filter-ctrl'>
    <input id='filter-input' type='text' name='filter' placeholder='Filter by name' />
</div>

<script>
var markers = {
    "type": "FeatureCollection",
    "features": [{
        "type": "Feature",
        "properties": {
            "marker-symbol": "theatre"
        },
        "geometry": {
            "type": "Point",
            "coordinates": [-77.038659, 38.931567]
        }
    }, {
        "type": "Feature",
        "properties": {
            "marker-symbol": "theatre"
        },
        "geometry": {
            "type": "Point",
            "coordinates": [-77.003168, 38.894651]
        }
    }, {
        "type": "Feature",
        "properties": {
            "marker-symbol": "bar"
        },
        "geometry": {
            "type": "Point",
            "coordinates": [-77.090372, 38.881189]
        }
    }, {
        "type": "Feature",
        "properties": {
            "marker-symbol": "bicycle"
        },
        "geometry": {
            "type": "Point",
            "coordinates": [-77.052477, 38.943951]
        }
    }, {
        "type": "Feature",
        "properties": {
            "marker-symbol": "music"
        },
        "geometry": {
            "type": "Point",
            "coordinates": [-77.031706, 38.914581]
        }
    }, {
        "type": "Feature",
        "properties": {
            "marker-symbol": "music"
        },
        "geometry": {
            "type": "Point",
            "coordinates": [-77.020945, 38.878241]
        }
    }, {
        "type": "Feature",
        "properties": {
            "marker-symbol": "music"
        },
        "geometry": {
            "type": "Point",
            "coordinates": [-77.007481, 38.876516]
        }
    }]
};

var layerIDs = []; // Will contain a list used to filter against.
var filterInput = document.getElementById('filter-input');
var map = new mapboxgl.Map({
    container: 'map',
    style: 'mapbox://styles/mapbox/light-v8',
    center: [-77.04, 38.907],
    zoom: 11.15
});

map.on('load', function() {
    // Add marker data as a new GeoJSON source.
    map.addSource('markers', {
        "type": "geojson",
        "data": markers
    });

    markers.features.forEach(function(feature) {
        var symbol = feature.properties['marker-symbol'];
        var layerID = 'poi-' + symbol;

        // Add a layer for this symbol type if it hasn't been added already.
        if (!map.getLayer(layerID)) {
            map.addLayer({
                "id": layerID,
                "type": "symbol",
                "source": "markers",
                "layout": {
                    "icon-image": symbol + "-15",
                    "icon-allow-overlap": true,
                    "text-field": symbol,
                    "text-font": ["Open Sans Bold", "Arial Unicode MS Bold"],
                    "text-size": 11,
                    "text-transform": "uppercase",
                    "text-letter-spacing": 0.05,
                    "text-offset": [0, 1.5]
                },
                "paint": {
                    "text-color": "#202",
                    "text-halo-color": "#fff",
                    "text-halo-width": 2
                },
                "filter": ["==", "marker-symbol", symbol]
            });

            layerIDs.push(layerID);
        }
    });

    filterInput.addEventListener('keyup', function(e) {
        // If the input value matches a layerID set
        // it's visibility to 'visible' or else hide it.
        var value = e.target.value.trim().toLowerCase();
        layerIDs.forEach(function(layerID) {
            map.setLayoutProperty(layerID, 'visibility',
                layerID.indexOf(value) > -1 ? 'visible' : 'none');
        });
    });
});
</script>
